<template>
	<view>
		<uni-status-bar ></uni-status-bar>
		<view class="nav-bar" style="display: flex;justify-content: space-between;align-items: center;">
			<view @tap="back()">取消</view>
			<view>房间信息</view>
			<view @tap="submit()">创建</view>
		</view>
		
		<view class="image-view">
			<view @tap="chooseImage()" style="display: flex;justify-content: center;">
				<image :src="userInfo.user_icon"></image>
			</view>
			<view class="font">点击修改背景图</view>
		</view>
		
		<view class="userinfo">
			<view class="nickname">
				<view class="font">房间名:</view>
				<view style="border-bottom: 2rpx solid #E1E1E1;padding: 0rpx 10rpx;">
					<input  v-model="userInfo.username"/>
				</view>
			</view>
			
			
			<view class="font">类型:</view>
			<view class="uni-list">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in typeList" :key="item.value">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>

		</view>
	</view>
</template>

<script>
	import uniStatusBar from "../../components/uni-status-bar.vue";
	export default {
		components:{
			uniStatusBar
		},
		data() {
			return {
				userInfo:{},
				changeIcon: false,
				date: "",
				typeList:[
					{
						value:1,
						name:"闲聊",
					},
					{
						value:2,
						name:"相亲",
					},
					{
						value:3,
						name:"唱歌",
					},
					{
						value:4,
						name:"开黑",
					},
				],
				current: 0
			}
		},
		onLoad(){
			this.getUserInfo();
			uni.getLocation({
			    type: 'wgs84',
				geocode: true,
			    success: function (res) {
			        console.log('当前位置的经度：' + res.longitude);
			        console.log('当前位置的纬度：' + res.latitude);
					console.log(res);
			    }
			});
		},
		methods: {
			radioChange(){
				
			},
			back(){
				uni.navigateBack();
			},
			changeSex(e){
				this.userInfo.sex = e.detail.value;
			},
			async getUserInfo(){
				
				let [err,res] = await this.$http.get('user/detail',{
					uid: this.User.userinfo.id
				}, {checkToken: true});
				
				if(!this.$http.errorCheck(err,res)){
					uni.showLoading({ title: '请求失败' });
					return;
				}
				
				this.userInfo = res.data.data;
			},
			chooseImage(){
				uni.chooseImage(
					{
						count: 1,
						sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success:  (res) => {
							if(res.tempFilePaths[0] != undefined){
								this.userInfo.user_icon = res.tempFilePaths[0];
								this.changeIcon = true;
							}
						}
					}
				);
			},
			async submit(){
				console.log(this.userInfo);
				
				uni.showLoading({
				    title: '修改中...'
				});
				
				if(!this.changeIcon){
					let param = {
						username: this.userInfo.username,
						signature: this.userInfo.signature,
						sex: this.userInfo.sex
					};
					
					this.postInfo(param);
					return;
				}
				
				//获取token
				let [err, res] = await this.$http.get("qiniu/token");
				if(!this.$http.errorCheck(err,res)){
					return;
				}
				let token = res.data.data.token;
				//上传到七牛云
				uni.uploadFile({
				    url: 'http://up-z2.qiniup.com', //仅为示例，非真实的接口地址
				    filePath: this.userInfo.user_icon,
				    name: 'file',
				    formData: {
						token: token
				    },
				    success: (uploadFileRes) => {
						let jsonObj = JSON.parse(uploadFileRes.data);
						let param = {
							username: this.userInfo.username,
							signature: this.userInfo.signature,
							user_icon: jsonObj.key,
							sex: this.userInfo.sex
						};
						
						this.postInfo(param);
				    },
					fail: (uploadFileRes) => {
						uni.hideLoading();
					    console.log("fail:" + uploadFileRes.data);
					}
				});
			},
			async postInfo(param){
				let [err, res] = await this.$http.post("user/update", param, {checkToken: true});
				if(!this.$http.errorCheck(err,res)){
					return;
				}
				
				console.log("修改信息:" + res.data);
				
				uni.hideLoading();
				uni.showToast({ title: '修改成功'});
				setTimeout(function() {
					uni.switchTab({
					    url: '/pages/home/home'
					});
				}, 1000);
			}
		}
	}
</script>

<style scoped>
.nav-bar{
	width:auto;
	white-space: nowrap;
	height: 100upx;
	border-bottom: 1px solid #c8c7cc;
	padding-left: 20upx;
	padding-right: 20upx;
}
.nav-bar>view{
	text-align: center;
	font-size: 30upx;
	height:50upx
}
.nav-bar>view:nth-child(3){
	width:80upx;
	border: 2upx solid red;
	color:red;
}
.image-view{
	height: 300upx;
	border-bottom: 20upx solid #f3f3f3;
	width:auto;
}
.image-view>view:nth-of-type(1){
	height: 70%;
}
.image-view>view:nth-of-type(2){
	height: 30%;
	text-align: center;
	color: #B1B1B1;
}
.image-view image{
	height: 200upx;
	width: 200upx;
	border-radius: 100%;
}
.userinfo{
	padding: 20upx 20upx;
}
.userinfo>view>*{
	/* font-size: 35upx; */
	height: 100%;
}
.font{
	color: #A1A1A1;
	font-size: 30rpx;
}
.userinfo>view>view:nth-of-type(1){
	width: 30%;
}
.userinfo>view>view:nth-of-type(2){
	color: #AAAAAA;
	width: 60%;
}
.userinfo>view{
	display: flex;
	margin-top: 20upx;
}
.userinfo input{
	height: 100%;
	width: 100%;
}
.uni-list-cell {
		justify-content: flex-start
}
</style>
